<template>
  <div>
    <van-form>
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="confirmPassword"
        type="password"
        name="confirmPassword"
        label="确认密码"
        placeholder="确认密码"
        :rules="[
          { required: true, message: '请填写密码' },
          { validator: validatePassword, message: '两次密码不匹配' },
        ]"
      />
    </van-form>
    <div style="margin: 16px">
      <input
        class="van-button van-button--info van-button--normal van-button--block van-button--round"
        type="button"
        value="注册"
        @click="onSubmit"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "formVail",
  data() {
    return {
      username: "",
      password: "",
      confirmPassword: "",
      submitFlag: false,
      fingerprintCode: "",
      uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = "-";

        this.uuidA = s.join("");
        return this.uuidA;
      },
      isWechat() {
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      },
      setCookie(c_name, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie =
          c_name +
          "=" +
          escape(value) +
          (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
      },
      getCookie(c_name) {
        if (document.cookie.length > 0) {
          let c_start = document.cookie.indexOf(c_name + "=");
          if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            let c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
          }
        }
        return "";
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.submitFlag) {
        if (!this.isWechat()) {
          this.$dialog.alert({
            message: "仅支持在微信上扫码使用!",
            theme: "round-button",
          });
          return;
        }
        this.$dialog
          .confirm({
            title: "温馨提示: 请在微信上观影",
            message:
              "注册的帐号只能在此设备上去使用, 且一台设备只能注册一个帐号, 确定使用该帐号?",
          })
          .then(() => {
            debugger;
            // let localPrintCode = localStorage.getItem("fingerprintCode");
            let localPrintCode = this.getCookie("fingerprintCode");
            if (!localPrintCode) {
              localPrintCode = this.uuid();
            }
            this.$axios
              .post("/cloud_api/login/register", {
                username: this.username,
                password: this.password,
                fingerprintCode: localPrintCode,
              })
              .then((res) => {
                let result = res.data;
                if (result.resultCode != 200) {
                  this.$dialog.alert({
                    message: result.tipMsg,
                    theme: "round-button",
                  });
                } else {
                  // localStorage.setItem("fingerprintCode", result.resultObj);
                  if (!this.getCookie("fingerprintCode")) {
                    this.setCookie(
                      "fingerprintCode",
                      result.resultObj,
                      365 * 10
                    );
                  }
                  this.$dialog
                    .alert({
                      message: result.tipMsg,
                      theme: "round-button",
                    })
                    .then(() => {
                      if (this.$route.query.model === "green") {
                        this.$router.push({ path: "/green" });
                      } else {
                        this.$router.push({ path: "/login" });
                      }
                    });
                }
              })
              .catch((error) => {
                console.log(error);
              });
          })
          .catch((error) => {
            this.username = "";
            this.password = "";
            this.confirmPassword = "";
          });
      }
    },
    validatePassword(event) {
      if (this.confirmPassword !== this.password) {
        this.submitFlag = false;
        return false;
      } else {
        this.submitFlag = true;
      }
    },
  },
};
</script>

<style>
</style>
